<template>
	<div class="white-box">
		<div class="si-one">
			<p>角色名称</p>
			<el-input v-model="value_text" placeholder="请输入角色名称" clearable />
		</div>
		<div class="mra-box">
			<loading-small v-if="loading"></loading-small>
			<el-empty description="暂无权限配置项" v-if="checkArr.length == 0 && !loading" />
			<template v-if="checkArr.length > 0 && !loading">
				<el-tree ref="treeRef" :data="checkArr" show-checkbox node-key="menu_id" default-expand-all
					:props="{ children: 'children',label:'title' }" />
			</template>
		</div>

		<div class="foot-btn flexs-center">
			<el-button type="primary" :loading="search_btn" @click="handleConfirm">确定添加</el-button>
			<el-button type="default" plain :loading="search_btn" @click="resetChecked">重置</el-button>
		</div>
	</div>
</template>

<script setup>
	import {
		getCurrentInstance,
		ref,
		reactive,
		onMounted,
		onBeforeUnmount
	} from "vue"
	import {
		useRouter
	} from "vue-router"
	import {
		Lock,
		Iphone,
		Warning
	} from "@element-plus/icons-vue"
	import SlideVerify from "vue3-slide-verify"
	import "vue3-slide-verify/dist/style.css"
	import JSEncrypt from "jsencrypt"

	const router = useRouter()
	const {
		proxy
	} = getCurrentInstance()

	onMounted(() => {
		getCheck()
	})
	onBeforeUnmount(() => {
		treeRef.value = null
		checkArr.value.length = 0
	})

	const value_text = ref("")
	const loading = ref(false)
	const search_btn = ref(false)
	const treeRef = ref(null)

	const handleConfirm = () => {
		let nodes = treeRef.value.getCheckedNodes(false, true) // 获取选中node数组
		if (value_text.value == '') {
			proxy.$message({
				message: "请输入角色名称",
				type: "warning"
			})
			return
		}
		if (!nodes || nodes.length == 0) {
			proxy.$message({
				message: "请勾选角色权限",
				type: "warning"
			})
			return
		}
		let arrs = [];
		for (let i = 0; i < nodes.length; i++) {
			if(nodes[i].children.length<=0){
				arrs.push(nodes[i].mod_id)
			}
		}
		search_btn.value = true
		proxy.$axios
		    .post('admin/system/role/create', {
		        name: value_text.value,
		        menus_id: arrs
		    })
		    .then((res) => {
		        search_btn.value = false
		        if (res.data.code == 200) {
		            router.push('/System/Role')
		        } else {
		            proxy.$message({message:res.data.msg,type:"error"})
		        }
		    })
		    .catch((err) => {
		        search_btn.value = false
		    })
	}
	const resetChecked = () => {
		treeRef.value.setCheckedKeys([], false)
	}

	//角色权限
	const checkArr = ref([])

	function getCheck() {
		proxy.$axios.get("common/dataSelect/menuSelect").then(res => {
			if (res.data.code == 200) {
				checkArr.value = res.data.data
			} else {
				proxy.$message({
					message: res.data.msg,
					type: "error"
				})
			}
		})
	}
</script>

<style lang="less" scoped>
	.white-content {
		padding-bottom: 40px;
	}

	:deep(.el-tree-node) {
		box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
		padding: @padding-md @padding-md;
		border-radius: @radius-xs;
		margin-bottom: @margin-mdl;
		flex: none;
		width: 100%;

		& .el-tree-node {
			box-shadow: 0 0px 0px;
			padding: 0;
			margin-bottom: 0;
			border-radius: 0;
		}

		.el-checkbox__inner {
			width: 18px;
			height: 18px;

			&::after {
				width: 4px;
				height: 9px;
				left: 6px;
				top: 1px;
			}
		}

		.el-tree-node__content {
			margin-bottom: @margin-xs;
			padding-left: 0;

			&:hover {
				background: none !important;
			}
		}

		.el-tree-node__children {
			display: flex;
			flex-flow: row wrap;
			justify-content: flex-start;
		}
	}

	.mra-box {
		border-radius: @radius-xs;
		margin: @margin-xl 0px;

		.mar-item {
			box-shadow: 0 0px 6px rgba(0, 0, 0, 0.06);
			padding: @padding-md @padding-md 0px;
			border-radius: @radius-xs;
			margin-bottom: @margin-mdl;

			&:last-child {
				margin-bottom: 0;
			}
		}
	}
</style>